<!-- Please remove this file from your project -->
<template>
  <div class="relative flex items-top justify-center bg-gray-100 sm:items-center sm:pt-0" id="header">
    <div class="left">left</div>
    <div class="center">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1"><a href="/">首页</a></el-menu-item>
        <el-submenu index="2">
          <template slot="title">分类</template>
          <el-menu-item index="2-1">底层架构</el-menu-item>
          <el-menu-item index="2-2">云原生</el-menu-item>
          <el-menu-item index="2-3">中间组件</el-menu-item>
          <el-submenu index="2-4">
            <template slot="title">开发语言</template>
            <el-menu-item index="2-4-1">Golang</el-menu-item>
            <el-menu-item index="2-4-2">Java</el-menu-item>
            <el-menu-item index="2-4-3">PHP</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="3" disabled>消息中心</el-menu-item>
        <el-menu-item index="4"><a href="/tag/22">标签</a></el-menu-item>
        <el-menu-item index="5"><a href="/article/12">文章</a></el-menu-item>
        <el-menu-item index="6"><a href="/about">关于</a></el-menu-item>
      </el-menu>
    </div>
    <div class="right">right</div>
  </div>
</template>

<script>
  export default {
    name: 'Header',
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style>
  #header {
    /* height: 52px; */
    border-top: 4px solid #00b5ad;
    background-color: #fff;
    /* border-color: #e7e7e7; */
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
    /* margin-bottom: 40px; */
    margin-top: 0;
    /* border: none; */
    border-bottom: 1px solid #d3e0e9;
    display: flex;

  }
  .center {
    width: 1200px;
    height: 100%;
    border: 1px solid red;
  }
</style>
